<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		
		body {
			font-family: "微软雅黑";
		}
		
		.biaoti {
			height: 200px;
			width: 100%;
			background-color: darkgray;
		}
		
		.biaoti h1 {
			font-weight: 400;
			font-size: 35px;
			padding-top: 50px;
			text-align: center
		}
		
		.biaoti p {
			text-align: center;
		}
		
		.ws,
		.xing,
		table tr,
		table{
			width: 1080px;
			margin: auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		
		h3 {
			padding-top: 35px;
			font-size: 30px;
			font-weight: 400;
			width: 1080px;
			margin: auto;
		}
		
		input {
			width: 30%;
			border-radius: 5px;
			height: 40px;
			border-color: #A9A9A9 !important;
		}
		
		select {
			border-radius: 5px;
			width: 10%;
			height: 40px;
		}
		
		button {
			border-radius: 5px;
			width: 10%;
			height: 40px;
			border: none;
			background-color: blue;
		}
		
		.xing {
			display: flex;
			justify-content: space-between;
			height: 30px;
			line-height: 30px;
			border-bottom: 1px solid #A9A9A9;
			border-top: 1px solid #A9A9A9;
		}
		
		table tr{
			display: flex;
			justify-content: space-between;
			height: 30px;
			line-height: 30px;
			border-bottom: 1px solid #A9A9A9;
		}
	</style>

	<body>
		<div class="biaoti">
			<h1>院信息表</h1>
			<p>1804</p>
		</div>
		<h3>添加</h3>
		<div class="ws">

			<input type="text" placeholder="姓名" id="n" />
			<select id="s">
				<option value="男">男</option>
				<option value="女">女</option>
			</select>
			<input type="number" placeholder="年龄" id="a" />
			<button id="btn">添加</button>

		</div>

		<div class="wb">
			<h3>列表</h3>
			<div class="xing">
				<p>姓名</p>
				<p>性别</p>
				<p>年龄</p>
			</div>
			<table id="list">
			</table>
			
		</div>

		<script type="text/javascript">
			document.querySelector("#btn").addEventListener("click", function() {
				var n = document.querySelector("#n").value;
				var s = document.querySelector("#s").value;
				var a = document.querySelector("#a").value;
				console.log(n)
				console.log(s)
				console.log(a)
				var xmlhttp;
				if(window.XMLHttpRequest) {
					//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
					xmlhttp = new XMLHttpRequest();
				} else {
					// IE6, IE5 浏览器执行代码
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange = function() {
					if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						console.log(xmlhttp.responseText)
demo()
						//					document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
					}
				}
				xmlhttp.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/addStudent?studentName=" + n + "&sex=" + s + "&age=" + a, true);
				xmlhttp.send();
			})
			
			
			function demo(){
				var xmlhttp;
				if(window.XMLHttpRequest) {
					//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
					xmlhttp = new XMLHttpRequest();
				} else {
					// IE6, IE5 浏览器执行代码
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange = function() {
					if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						console.log(xmlhttp.responseText)
						var json = JSON.parse(xmlhttp.responseText)
						console.log(json)
						document.querySelector("#list").innerHTML=""
						for(var i = 0;i<json.data.length;i++){
							var tr = document.createElement("tr")
							var name = document.createElement("td")
							name.innerHTML = json.data[i].studentName;
							var sex = document.createElement("td")
							sex.innerHTML = json.data[i].sex;
							var age = document.createElement("td")
							age.innerHTML = json.data[i].age;
							tr.appendChild(name)
							tr.appendChild(sex)
							tr.appendChild(age)
							document.querySelector("#list").appendChild(tr)
						}
					}
				}
				xmlhttp.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/student", true);
				xmlhttp.send();
			}
			demo()
		</script>
	</body>

</html>